<script lang="tsx" setup>
import { reactive, ref, watch } from 'vue'
// 引入接口
import { getDevicesListAPI } from '@/api/vulnerability/fore'
// 时间处理
import { formatDate } from '@/utils'
import { useTablePage1 } from '@/hooks/web'
import { useSearch } from '@/hooks/component'
const props = defineProps({
  province: {
    type: String,
    required: true,
    default: ''
  }
})
const { table, page, ruleForm, getRecords } = useTablePage1(getDevicesListAPI, {
  ruleForm: {
    province: props.province,
    searchValue: ''
  },
  isMounted: false
})
const { handleSearch } = useSearch('advancedRef', ruleForm, getRecords)
// 顶部显示选择
const SelectValue = ref()
// 表格布局
const ruleTable = reactive({
  selections: [],
  columns: [
    { label: 'IP地址', prop: 'ip' },
    { label: '端口', prop: 'port' },
    { label: '服务', prop: 'service' },
    { label: '设备类型', prop: 'type' },
    { label: '设备厂商', prop: 'manu' },
    { label: '设备/软件型号', prop: 'model' },
    { label: '固定/软件版本', prop: 'version' },
    {
      label: '国家地区',
      // prop: 'nation'
      render: ({ row }: any) => <span>{row.nation.replace(/-/g, ' ')}</span>
    },
    {
      label: '发现时间',
      // prop: 'date'
      render: ({ row }: any) => <span>{formatDate(row.date)}</span>
    }
  ]
})
// 顶部显示
const infoList = ref([
  {
    name: '端口号',
    value: ''
  },
  {
    name: '服务类型',
    value: ''
  },
  {
    name: '国家',
    value: ''
  },
  {
    name: '省市',
    value: ''
  }
])
const updateInfoList = (data: any) => {
  infoList.value[0].value = data.port
  infoList.value[1].value = data.service
  const _nation =data.nation.split('-')
  infoList.value[2].value = _nation[0]
  infoList.value[3].value = _nation[2]?(_nation[1] + ' ' + _nation[2]):(_nation[1])
}

// 设备表点击事件
const ClickRow = (e: any) => {
  SelectValue.value = e
  updateInfoList(e)
}
// 监听省份变化
watch(
  () => props.province,
  (newProvince) => {
    ruleForm.province = newProvince
    getRecords()
  }
)
// 表格数据加载后抛出第一个cveCode
watch(
  () => table.loading,
  () => {
    if (!table.loading && table.records.length > 0) {
      updateInfoList(table.records[0])
    }
  }
)
</script>
<template>
  <div class="jm-bg-color jm-container">
    <!-- 列表 -->
    <div class="flex justify-between jm-mb">
      <div class="bgc-color-info list-info">
        <div class="item" v-for="(item, index) in infoList" :key="index">
          <span class="text-color-info">{{ item.name }}： </span>
          <span>{{ item.value }} </span>
        </div>
      </div>
      <jmp-search
        v-model="ruleForm.searchValue"
        placeholder="请输入关键字"
        @change="handleSearch('searchValue')"
      />
    </div>

    <!-- 列表 -->
    <jmp-table
      :data="table.records"
      :columns="ruleTable.columns"
      :loading="table.loading"
      @selection-change="ruleTable.selections = $event"
      @row-click="ClickRow"
    />
    <!-- 分页 -->
    <jmp-pagination
      v-model:page="page.pageNum"
      v-model:limit="page.pageSize"
      v-model:total="page.total"
    />
  </div>
</template>
<style lang="scss" scoped>
.list-info {
  width: 50%;
  padding: 0 0.625rem 0 3.125rem;
  display: flex;

  .item {
    position: relative;
    flex: 1;
    text-align: left;
    align-content: center;

    &:nth-child(1)::before {
      content: '';
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      left: -12%;
      width: 5px;
      height: 60%;
      background-color: var(--el-color-primary);
    }
  }
}
</style>
